<template>
	<div id="Announce">
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
			<div v-if="user == 0">
				 <el-breadcrumb-item :to="{ name: 'managerNotice' }">公告管理</el-breadcrumb-item>
				<el-breadcrumb-item>发布系统公告</el-breadcrumb-item>
			</div>
			<div v-if="user != 0">
				 <el-breadcrumb-item :to="{ name: 'managerUser' }">用户管理</el-breadcrumb-item>
				<el-breadcrumb-item>发送消息</el-breadcrumb-item>
			</div>
			</el-breadcrumb>
		</div>
		<div class="Announce">
			<p class='title' v-if="user == 0">发布公告</p>
			<p class='title' v-if="user != 0">发送消息</p>
			<div class="adddiv">
				<label for="title">标题:</label>
				<input type="text" name="title" v-model="notice.title"  />
			</div>
			<div class="adddiv">
				<label for="target">对象:</label>
				<span style="line-height: 30px;">{{this.target}}</span>
			</div>
			<div class="adddiv">
				<label for="content">内容:</label>
				<textarea class="textarea" v-model="notice.content" row="6" ></textarea>
			</div>
			
			<div class="adddiv">
				<el-button @click="postNotice" type="primary" >
					<span  v-if="user == 0">发布公告</span>
					<span  v-if="user != 0">发送消息</span>
				</el-button>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				notice: {
				},
				target:'全体用户',
				user:0,
				m_name:''
			}
		},
		watch:{
			$route:function(val){
				if(val.query.user == undefined){
					this.target = '全体用户'
					this.user =0;
				}else{
					this.target = val.query.user
					this.user = val.query.user;
				}
			}
		},
		created() {
			this.m_name = this.$store.state.user[0].username;
			if(this.$route.query.user == undefined){
				this.user = 0;
			}else{
				this.user = this.$route.query.user;
				this.target = this.$route.query.user;
			}
			
		},
		methods: {
			postNotice() {
				let t = new Date();
				let a =`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()} ${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`
				this.notice.time = a;
				this.notice.target = this.user;
				if(this.notice.title && this.notice.content){
					let notice = {
						title:this.notice.title,
						content:this.notice.content,
						time:this.notice.time,
						target:this.notice.target,
						m_name:this.m_name
					}
					this.$axios.post('/api/notice/insertNotice', notice)
						.then(data => {
							if (data.data == 'ok') {
								
								if(this.user == 0){
									alert('成功发布公告');
									this.$router.push({
										name: 'managerNotice',
									})
								}
								else{
									alert('成功发送消息');

									this.$router.push({
										name: 'managerUser',
									})
								}
								console.log('ok')
							}
					
						})
						.catch(err => {
							console.log(err)
						})
				}
				else{
					alert('填写完信息')
				}
				
			},

		}
	}
</script>

<style lang='less' scoped>
	#Announce {
		width: 100%;
		height: 100%;
		.breadcrumb{
			height: 28px;
			span{
				line-height: 28px;
		
			}
		}
		.Announce{
			width: 60%;
			height: 400px;
			margin: 0 auto;
			padding-top: 22px;
			position: relative;
			top: 66px;
			border:1px solid #E0ECFF;
			background-color: white;
			color: black;
			border-radius:10px; 
			.title{
				font-size: 20px;
				margin-top:5px; 
				}
			.adddiv {
				margin-top: 30px;
				display: flex;
				display: -webkit-flex;
				margin-left:33px;
				
				label {
					width: 160px;
					line-height: 30px;
				}
				.textarea{
					resize: none;
					width: 200px;
					padding: 0;
					height: 100px;
					border-color: #000;
					&:focus{
						border-color: red;
					}
				}
			
				input {
					width: 200px;
					border: 1px solid #000;
					height: 30px;
					&:focus{
						border-color: red;
					}
					
				}
				button{
					width: 100px;
					height: 40px;
					margin-left:166px;
				}
			
			
			}
		}
		


	}
</style>
